/* 主色 */
$uni-primary: #10AEFF;	//正常
$uni-primary-disable: mix(#fff,$uni-primary,50%);	//禁用
$uni-primary-light: mix(#fff,$uni-primary,80%);	//镂空

// 辅助色
//成功
$uni-success: #4cd964;		//正常
$uni-success-disable: mix(#fff,$uni-success,50%);//禁用
$uni-success-light: mix(#fff,$uni-success,80%);	//镂空
//警示
$uni-warning: #f0ad4e;      	//正常  
$uni-warning-disable: mix(#fff,$uni-warning,50%);//禁用
$uni-warning-light: mix(#fff,$uni-warning,80%);	//镂空
//错误
$uni-error: #dd524d;			//正常
$uni-error-disable: mix(#fff,$uni-error,50%);	//禁用
$uni-error-light: mix(#fff,$uni-error,80%);	//镂空
//信息
$uni-info: #90939a;			//正常
$uni-info-disable: mix(#fff,$uni-info,50%);	//禁用
$uni-info-light: mix(#fff,$uni-info,80%);		//镂空

/* 文字色 */
$uni-main-color: #303133; 			// 主要文字
$uni-base-color: #606266;			// 常规文字
$uni-secondary-color: #909399;		// 次要文字
$uni-extra-color: #C0C4CC;			// 辅助说明

/* 样式色 */
$uni-bg-color:#F7F7F7;					//背景色
$uni-icon: #7A7E83;						//图标
$uni-bg-color-mask: rgba(0, 0, 0, 0.4);	//遮罩颜色
$uni-black: #000000;					//黑色
$uni-white: #ffffff;					//白色
$uni-transparent: rgba($color: #000000, $alpha: 0);//透明色

/* 边框颜色 */
$uni-border-color-1: #F0F0F0;
$uni-border-color-2: #EDEDED;
$uni-border-color-3: #DCDCDC;
$uni-border-color-4: #B9B9B9;
$uni-border-color-5: #9F9F9F;

/* 阴影 */
$uni-shadow-2:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-3:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-4:0 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);

/* 边框 solid */
$uni-border-solid-color: #EDEDED;
$uni-border-solid-width: 1rpx;
$uni-border-solids-color: #EDEDED;
$uni-border-solids-width: 8rpx;

/* 文字尺寸 */
$uni-font-size-1:20rpx;
$uni-font-size-2:24rpx;
$uni-font-size-3:28rpx;//常规
$uni-font-size-4:32rpx;
$uni-font-size-5:38rpx;

/* 外边距 */
$uni-margin-1: 10rpx;
$uni-margin-2: 20rpx;
$uni-margin-3: 30rpx;//常规
$uni-margin-4: 40rpx;
$uni-margin-5: 50rpx;

/* 内边距 */
$uni-padding-1: 10rpx;
$uni-padding-2: 20rpx;
$uni-padding-3: 30rpx;//常规
$uni-padding-4: 40rpx;
$uni-padding-5: 50rpx;

/* 边框圆角 */
$uni-border-radius-1: 2rpx;
$uni-border-radius-2: 4rpx;
$uni-border-radius-3: 6rpx;//常规
$uni-border-radius-4: 12rpx;
$uni-border-radius-5: 16rpx;
$uni-border-radius-circle: 5000rpx;

/* 快捷样式 */
/* ColorUI增强 */
.cu-btn[class*="line"]::after {
	border-radius: $uni-border-radius-3;
}
/* 点击效果。用于view的hover-class属性。切勿写到class */
.hover:active{
	opacity: 0.7;
}
/* 默认按钮按下去样式 */
.button-hover{
	opacity: 0.7;
}
/* 背景 */
/* 主题色 */
.bg {
	color: #ffffff;
	background-color: $uni-primary;
}
.bg-light {
	color: $uni-primary;
	background-color: $uni-primary-light;
}
.bg-line {
	color: $uni-primary;
	background-color: #ffffff;
	border: $uni-primary 1rpx solid;
}
/* 辅助色 */
.bg-success {
	color: #ffffff;
	background-color: $uni-success;
}
.bg-success-light {
	color: $uni-success;
	background-color: $uni-success-light;
}
.bg-success-line {
	color: $uni-success;
	background-color: #ffffff;
	border: $uni-success 1rpx solid;
}
/* 警示 */
.bg-warn {
	color: #ffffff;
	background-color: $uni-warning;
}
.bg-warn-light {
	color: $uni-warning;
	background-color: $uni-warning-light;
}
.bg-warn-line {
	color: $uni-warning;
	background-color: #ffffff;
	border: $uni-warning 1rpx solid;
}
/* 错误 */
.bg-error {
	color: #ffffff;
	background-color: $uni-error;
}
.bg-error-light {
	color: $uni-error;
	background-color: $uni-error-light;
}
.bg-error-line {
	color: $uni-error;
	background-color: #ffffff;
	border: $uni-error 1rpx solid;
}
/* 信息 */
.bg-info {
	color: #ffffff;
	background-color: $uni-info;
}
.bg-info-light {
	color: $uni-info;
	background-color: $uni-info-light;
}
.bg-info-line {
	color: $uni-info;
	background-color: #ffffff;
	border: $uni-info 1rpx solid;
}
//常规色
/* 背景颜色 */
.bg-page {
	background-color: $uni-bg-color;
}
/* 遮罩 */
.bg-mask {
	background-color: $uni-bg-color-mask;
}
/* 背景黑色 */
.bg-black{
	background-color: $uni-black;
}
/* 背景白色 */
.bg-white{
	background-color: $uni-white;
}
/* 背景透明色 */
.bg-transparent{
	background-color: rgba($color: #000000, $alpha: 0);
}
/* 文本黑色 */
.text-black{
	color: $uni-black;
}
/* 文本白色 */
.text-white{
	color: $uni-white;
}
// 边框颜色
.border-c1{
	border-color: $uni-border-color-1;
}
.border-c2{
	border-color: $uni-border-color-2;
}
.border-c3{
	border-color: $uni-border-color-3;
}
.border-c4{
	border-color: $uni-border-color-4;
}
.border-c5{
	border-color: $uni-border-color-5;
}
/* 文本颜色 */
.text-c2 {
	color: $uni-main-color;
}
.text-c3 {
	color: $uni-base-color;
}
.text-c4 {
	color: $uni-secondary-color;
}
.text-c5 {
	color: $uni-extra-color;
}
/* 阴影 */
.shadow-2{
	box-shadow: $uni-shadow-2;
}
.shadow-3{
	box-shadow: $uni-shadow-3;
}
.shadow-4{
	box-shadow: $uni-shadow-4;
}
/* 主题色 */
.bg-color {
	background-color: $uni-primary;
}
.text-color {
	color: $uni-primary;
}
.border-color{
	border-color: $uni-primary;
}
.bg-color-important {
	background-color: $uni-primary !important;
}
.text-color-important {
	color: $uni-primary !important;
}
.border-color-important{
	border-color: $uni-primary !important;
}

/* 间距 */
/* 外边距 */
.m-1 {
	margin: $uni-margin-1;
}
.m-2 {
	margin: $uni-margin-2;
}
.m-3 {
	margin: $uni-margin-3;
}
.m-4 {
	margin: $uni-margin-4;
}
.m-5 {
	margin: $uni-margin-5;
}
.ml-1 {
	margin-left: $uni-margin-1;
}
.ml-2 {
	margin-left: $uni-margin-2;
}
.ml-3 {
	margin-left: $uni-margin-3;
}
.ml-4 {
	margin-left: $uni-margin-4;
}
.ml-5 {
	margin-left: $uni-margin-5;
}
.mr-1 {
	margin-right: $uni-margin-1;
}
.mr-2 {
	margin-right: $uni-margin-2;
}
.mr-3 {
	margin-right: $uni-margin-3;
}
.mr-4 {
	margin-right: $uni-margin-4;
}
.mr-5 {
	margin-right: $uni-margin-5;
}
.mt-1 {
	margin-top: $uni-margin-1;
}
.mt-2 {
	margin-top: $uni-margin-2;
}
.mt-3 {
	margin-top: $uni-margin-3;
}
.mt-4 {
	margin-top: $uni-margin-4;
}
.mt-5 {
	margin-top: $uni-margin-5;
}
.mb-1 {
	margin-bottom: $uni-margin-1;
}
.mb-2 {
	margin-bottom: $uni-margin-2;
}
.mb-3 {
	margin-bottom: $uni-margin-3;
}
.mb-4 {
	margin-bottom: $uni-margin-4;
}
.mb-5 {
	margin-bottom: $uni-margin-5;
}
.mlr-1 {
	margin-left: $uni-margin-1;
	margin-right: $uni-margin-1;
}
.mlr-2 {
	margin-left: $uni-margin-2;
	margin-right: $uni-margin-2;
}
.mlr-3 {
	margin-left: $uni-margin-3;
	margin-right: $uni-margin-3;
}
.mlr-4 {
	margin-left: $uni-margin-4;
	margin-right: $uni-margin-4;
}
.mlr-5 {
	margin-left: $uni-margin-5;
	margin-right: $uni-margin-5;
}
.mtb-1 {
	margin-top: $uni-margin-1;
	margin-bottom: $uni-margin-1;
}
.mtb-2 {
	margin-top: $uni-margin-2;
	margin-bottom: $uni-margin-2;
}
.mtb-3 {
	margin-top: $uni-margin-3;
	margin-bottom: $uni-margin-3;
}
.mtb-4 {
	margin-top: $uni-margin-4;
	margin-bottom: $uni-margin-4;
}
.mtb-5 {
	margin-top: $uni-margin-5;
	margin-bottom: $uni-margin-5;
}

/* 内间距 */
.p-1{
	padding: $uni-padding-1;
}
.p-2{
	padding: $uni-padding-2;
}
.p-3{
	padding: $uni-padding-3;
}
.p-4{
	padding: $uni-padding-4;
}
.p-5{
	padding: $uni-padding-5;
}
/* 左间距 */
.pl-1{
	padding-left: $uni-padding-1;
}
.pl-2{
	padding-left: $uni-padding-2;
}
.pl-3{
	padding-left: $uni-padding-3;
}
.pl-4{
	padding-left: $uni-padding-4;
}
.pl-5{
	padding-left: $uni-padding-5;
}
/* 右间距 */
.pr-1{
	padding-right: $uni-padding-1;
}
.pr-2{
	padding-right: $uni-padding-2;
}
.pr-3{
	padding-right: $uni-padding-3;
}	
.pr-4{
	padding-right: $uni-padding-4;
}
.pr-5{
	padding-right: $uni-padding-5;
}	
/* 左右间距 */
.plr-1{
	padding-left: $uni-padding-1;
	padding-right: $uni-padding-1;
}
.plr-2{
	padding-left: $uni-padding-2;
	padding-right: $uni-padding-2;
}
.plr-3{
	padding-left: $uni-padding-3;
	padding-right: $uni-padding-3;
}
.plr-3{
	padding-left: $uni-padding-4;
	padding-right: $uni-padding-4;
}
.plr-4{
	padding-left: $uni-padding-5;
	padding-right: $uni-padding-5;
}
/* 上间距 */
.pt-1{
	padding-top: $uni-padding-1;
}
.pt-2{
	padding-top: $uni-padding-2;
}
.pt-3{
	padding-top: $uni-padding-3;
}
.pt-4{
	padding-top: $uni-padding-4;
}
.pt-5{
	padding-top: $uni-padding-5;
}
/* 下间距 */
.pb-1{
	padding-bottom: $uni-padding-1;
}
.pb-2{
	padding-bottom: $uni-padding-2;
}
.pb-3{
	padding-bottom: $uni-padding-3;
}
.pb-4{
	padding-bottom: $uni-padding-4;
}
.pb-5{
	padding-bottom: $uni-padding-5;
}
/* 上下间距 */
.ptb-1{
	padding-top: $uni-padding-1;
	padding-bottom: $uni-padding-1;
}
.ptb-2{
	padding-top: $uni-padding-2;
	padding-bottom: $uni-padding-2;
}
.ptb-3{
	padding-top: $uni-padding-3;
	padding-bottom: $uni-padding-3;
}
.ptb-4{
	padding-top: $uni-padding-4;
	padding-bottom: $uni-padding-4;
}
.ptb-5{
	padding-top: $uni-padding-5;
	padding-bottom: $uni-padding-5;
}
/* 边框半径 */
.radius-1 {
	border-radius: $uni-border-radius-1;
}
.radius-2 {
	border-radius: $uni-border-radius-2;
}
.radius-3 {
	border-radius: $uni-border-radius-3;
}
.radius-4 {
	border-radius: $uni-border-radius-4;
}
.radius-5 {
	border-radius: $uni-border-radius-5;
}
.radius-tl-1 {
	border-top-left-radius: $uni-border-radius-1;
}
.radius-tl-2 {
	border-top-left-radius: $uni-border-radius-2;
}
.radius-tl-3 {
	border-top-left-radius: $uni-border-radius-3;
}
.radius-tl-4 {
	border-top-left-radius: $uni-border-radius-4;
}
.radius-tl-5 {
	border-top-right-radius: $uni-border-radius-5;
}
.radius-tr-1 {
	border-top-right-radius: $uni-border-radius-1;
}
.radius-tr-2 {
	border-top-right-radius: $uni-border-radius-2;
}
.radius-tr-3 {
	border-top-right-radius: $uni-border-radius-3;
}
.radius-tr-4 {
	border-top-right-radius: $uni-border-radius-4;
}
.radius-tr-5 {
	border-top-right-radius: $uni-border-radius-5;
}
.radius-bl-1 {
	border-bottom-left-radius: $uni-border-radius-1;
}
.radius-bl-2 {
	border-bottom-left-radius: $uni-border-radius-2;
}
.radius-bl-3 {
	border-bottom-left-radius: $uni-border-radius-3;
}
.radius-bl-4 {
	border-bottom-left-radius: $uni-border-radius-4;
}
.radius-bl-5 {
	border-bottom-left-radius: $uni-border-radius-5;
}
.radius-br-1 {
	border-bottom-right-radius: $uni-border-radius-1;
}
.radius-br-2 {
	border-bottom-right-radius: $uni-border-radius-2;
}
.radius-br-3 {
	border-bottom-right-radius: $uni-border-radius-3;
}
.radius-br-4 {
	border-bottom-right-radius: $uni-border-radius-4;
}
.radius-br-5 {
	border-bottom-right-radius: $uni-border-radius-5;
}
/* 圆角 */
.round {
	border-radius: $uni-border-radius-circle;
}
/* 边框 */
.solid::after {
	border: $uni-border-solid-width solid $uni-border-solid-color;
}
.solid-top::after {
	border-top: $uni-border-solid-width solid $uni-border-solid-color;
}
.solid-right::after {
	border-right: $uni-border-solid-width solid $uni-border-solid-color;
}
.solid-bottom::after {
	border-bottom: $uni-border-solid-width solid $uni-border-solid-color;
}
.solid-left::after {
	border-left: $uni-border-solid-width solid $uni-border-solid-color;
}
.solid-left-right::after {
	border-left: $uni-border-solid-width solid $uni-border-solid-color;
	border-right: $uni-border-solid-width solid $uni-border-solid-color;
}
.solid-top-bottom::after {
	border-top: $uni-border-solid-width solid $uni-border-solid-color;
	border-bottom: $uni-border-solid-width solid $uni-border-solid-color;
}
.solids::after {
	border: $uni-border-solids-width solid $uni-border-solids-color;
}
.solids-top::after {
	border-top: $uni-border-solids-width solid $uni-border-solids-color;
}
.solids-right::after {
	border-right: $uni-border-solids-width solid $uni-border-solids-color;
}
.solids-bottom::after {
	border-bottom: $uni-border-solids-width solid $uni-border-solids-color;
}
.solids-left::after {
	border-left: $uni-border-solids-width solid $uni-border-solids-color;
}
.solids-left-right::after {
	border-left: $uni-border-solids-width solid $uni-border-solids-color;
	border-right: $uni-border-solids-width solid $uni-border-solids-color;
}
.solids-top-bottom::after {
	border-top: $uni-border-solids-width solid $uni-border-solids-color;
	border-bottom: $uni-border-solids-width solid $uni-border-solids-color;
}
/* 文本 */
/* 文本尺寸 */
.text-s1 {
	font-size: $uni-font-size-1;
}
.text-s2 {
	font-size: $uni-font-size-2;
}
.text-s3 {
	font-size: $uni-font-size-3;
}
.text-s4 {
	font-size: $uni-font-size-4;
}
.text-s5 {
	font-size: $uni-font-size-5;
}
/* 文本隐藏 1行*/
.text-cut,.text-cut-1 {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/* 文本隐藏 2行*/
.text-cut-2 {
	text-overflow: ellipsis;
	white-space: normal !important;
	overflow: hidden;
	display: -webkit-box;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* 文本隐藏 3行*/
.text-cut-3 {
	text-overflow: ellipsis;
	white-space: normal !important;
	overflow: hidden;
	display: -webkit-box;
	word-wrap: break-word;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.text-bold {
	font-weight: bold;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-start {
	text-align: start;
}
.text-end {
	text-align: end;
}
.text-justify {
	text-align: justify;
}

/* ==================
		  布局
 ==================== */

/*  -- flex弹性布局 -- */
.flex {
	display: flex;
}
.flex-direction {
	flex-direction: column;
}
.flex-wrap {
	flex-wrap: wrap;
}
/*【容器】横向对齐(justify-content)*/
.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
.justify-around {
	justify-content: space-around;
}
/* 【容器】纵向对齐(align-items)【用于单行】 */
.align-start {
	align-items: flex-start;
}
.align-end {
	align-items: flex-end;
}
.align-center {
	align-items: center;
}
.align-stretch {
	align-items: stretch;
}
.align-baseline {
	align-items: baseline;
}
/*【容器】纵向对齐(align-content)【用于多行】*/
.content-start {
	align-content: flex-start;
}
.content-center {
	align-content: center;
}
.content-between {
	align-content: space-between;
}
.content-around {
	align-content: space-around;
}
.content-end{
	align-content: flex-end;
}
.content-stretch{
	align-content: stretch;
}
/*【项目】横向对齐(align-self)【用于自身单独布局】*/
.self-start {
	align-self: flex-start;
}
.self-center {
	align-self: "flex-center";
}
.self-end {
	align-self: flex-end;
}
.self-stretch {
	align-self: stretch;
}
.self-stretch {
	align-self: stretch;
}
.self-baseline {
	align-self: baseline;
}
/*【项目】放大比例(flex-grow)*/
.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}
.flex-3 {
	flex: 3;
}
/*【项目】百分比(flex-basis)*/
.basis-20 {
	flex-basis: 20%;
}
.basis-40 {
	flex-basis: 40%;
}
.basis-50 {
	flex-basis: 50%;
}
.basis-60 {
	flex-basis: 60%;
}
.basis-80 {
	flex-basis: 80%;
}

/* grid布局 */

.grid {
	display: flex;
	flex-wrap: wrap;
}

.grid.grid-square {
	overflow: hidden;
}

.grid.grid-square .cu-tag {
	position: absolute;
	right: 0;
	top: 0;
	border-bottom-left-radius: 6upx;
	padding: 6upx 12upx;
	height: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.grid.grid-square>view>text[class*="cuIcon-"] {
	font-size: 52upx;
	position: absolute;
	color: #8799a3;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.grid.grid-square>view {
	margin-right: 20upx;
	margin-bottom: 20upx;
	border-radius: 6upx;
	position: relative;
	overflow: hidden;
}
.grid.grid-square>view.bg-img image {
	width: 100%;
	height: 100%;
	position: absolute;
}
.grid.col-1.grid-square>view {
	padding-bottom: 100%;
	height: 0;
	margin-right: 0;
}

.grid.col-2.grid-square>view {
	padding-bottom: calc((100% - 20upx)/2);
	height: 0;
	width: calc((100% - 20upx)/2);
}

.grid.col-3.grid-square>view {
	padding-bottom: calc((100% - 40upx)/3);
	height: 0;
	width: calc((100% - 40upx)/3);
}

.grid.col-4.grid-square>view {
	padding-bottom: calc((100% - 60upx)/4);
	height: 0;
	width: calc((100% - 60upx)/4);
}

.grid.col-5.grid-square>view {
	padding-bottom: calc((100% - 80upx)/5);
	height: 0;
	width: calc((100% - 80upx)/5);
}

.grid.col-2.grid-square>view:nth-child(2n),
.grid.col-3.grid-square>view:nth-child(3n),
.grid.col-4.grid-square>view:nth-child(4n),
.grid.col-5.grid-square>view:nth-child(5n) {
	margin-right: 0;
}

.grid.col-1>view {
	width: 100%;
}

.grid.col-2>view {
	width: 50%;
}

.grid.col-3>view {
	width: 33.33%;
}

.grid.col-4>view {
	width: 25%;
}

.grid.col-5>view {
	width: 20%;
}

/* -- 浮动 --  */
.cf::after,
.cf::before {
	content: " ";
	display: table;
}
.cf::after {
	clear: both;
}
.fl {
	float: left;
}
.fr {
	float: right;
}